<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 最简单的html标签 + js  百度功能 
        抖动  三缸机器
        易用
    -->
    <input type="text" id="undebounce" autofocus 
        placeholder="请输入您要搜索的内容" />
    <button id="btn">btn</button>
    <button id="cancel">取消搜索事件绑定</button>
    <script>
    window.onload = function() {
        const input = document.querySelector('#undebounce');
        const cancel = document.getElementById('cancel');
        const btn = document.getElementById('btn');
        const consoleOne = () => { console.log('one'); }
        const consoleTwo = () => { console.log('two'); }
        const consoleThree = () => { console.log('three'); }

        btn.addEventListener('click', consoleOne)
        btn.addEventListener('click', consoleTwo)
        btn.addEventListener('click', consoleThree)
        /*
         * @func  搜索功能
         * @params {content: string} 关键字
         * @return 返回结果列表
         */
        function doInput(event) {
            let keyword = event.target.value;
            // 能封装就封装  解耦
            // 如果流程性代码超过10行， 一定封装
            // 搜索比较复杂 封装能力 
            // 应该放到外面，
            // console.log('准备实时搜索' + content);
            ajax(keyword)
            // console.log(event);
        }
        function ajax(content) {
            console.log('准备实时搜索' + content);
        }
        input.addEventListener('input', doInput)
        input.addEventListener('keydown', function(event) {
            if (event.keyCode == 13) {
                console.log('搜索吧');
            }
        })
        cancel.addEventListener('click', function() {
            input.removeEventListener('input', doInput);
            btn.removeEventListener('click', consoleOne);
        })
    }
    
    </script>
</body>
</html>